import { useAppSelector } from '@/store';
import {
  getAllChannelAction,
  getUserChannelAction,
} from '@/store/action/channel';
import { Popup, Tabs } from 'antd-mobile';
import { useEffect, useState } from 'react';
import { useDispatch } from 'react-redux';
import Icon from '@/components/Icon';
import styles from './index.module.scss';
export default function Channel() {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getAllChannelAction());
    dispatch(getUserChannelAction());
  }, [dispatch]);

  // 获取 redux 中频道列表数据
  const { allList, userList } = useAppSelector((state) => state.channel);
  const [visible, setVisible] = useState(false);
  const [editable, setEditable] = useState(false);
  const [activeId, setActiveId] = useState('0');

  //计算剩余的频道  findIndex  为true会返回当前的下标  没有则返回 -1
  const resList = allList.filter((item) => {
    return userList.findIndex((v) => v.id === item.id) === -1;
  });

  return (
    <div className={styles.root}>
      <Tabs
        activeKey={activeId}
        onChange={(key) => setActiveId(key)}
        className="tabs"
      >
        {userList.map((item) => (
          <Tabs.Tab title={item.name} key={item.id} />
        ))}
      </Tabs>
      <div className="right">
        <Icon type="iconbtn_search" />
        <Icon type="iconbtn_channel" onClick={() => setVisible(true)} />
      </div>
      <Popup
        visible={visible}
        position="left"
        bodyClassName={styles.channelPopup}
      >
        {/* 顶部栏：带关闭按钮 */}
        <div className="channel-header">
          <Icon
            type="iconbtn_channel_close"
            onClick={() => setVisible(false)}
          />
        </div>

        {/* 频道列表 */}
        <div className="channel-content">
          {/* 当前已选择的频道列表 */}
          <div className="channel-item edit">
            <div className="channel-item-header">
              <span className="channel-item-title">我的频道</span>
              <span className="channel-item-title-extra">点击删除频道</span>
              <span
                className="channel-item-edit"
                onClick={() => setEditable(!editable)}
              >
                {editable ? '完成' : '编辑'}
              </span>
            </div>

            <div className="channel-list">
              {userList.map((item) => (
                <span className="channel-list-item" key={item.id}>
                  {item.name}
                  {editable && <Icon type="iconbtn_tag_close" />}
                </span>
              ))}
            </div>
          </div>

          {/* 推荐的频道列表 */}
          <div className="channel-item">
            <div className="channel-item-header">
              <span className="channel-item-title">频道推荐</span>
              <span className="channel-item-title-extra">点击添加频道</span>
            </div>
            <div className="channel-list">
              {resList.map((item) => {
                return <span className="channel-list-item">+ {item.name}</span>;
              })}
            </div>
          </div>
        </div>
      </Popup>
    </div>
  );
}
